<template>
  <div class="box">
    <el-form size="medium" ref="expressForm" :model="order" :rules="itemRules" label-width="100px">
      <!--    <el-form-item label="发货方式" v-if="order.orderCommoditys.length > 1">
        <el-radio-group
          v-model="deliver_type"
          :disabled="disabled"
        >
          <el-radio :label="1">整单发货</el-radio>
          <el-radio :label="2">分包裹发货</el-radio>
        </el-radio-group>
      </el-form-item>
 -->
      <el-form-item label="收货人">{{ order.user_real_name }}</el-form-item>
      <el-form-item label="联系电话">{{ order.user_mobile }}</el-form-item>
      <el-form-item label="收货地址">{{ order.address }}</el-form-item>

      <el-form-item label="配送方式">
        <el-select @change="changetype" v-model="express_type" filterable placeholder="请选择配送方式">
          <el-option v-for="item in thirdlist" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="第三方运费" v-if="express_type == 1">
        <span>￥{{ fee }}</span>
      </el-form-item>
      <el-form-item v-if="status == 0">
        <span>{{ msg }}</span>
      </el-form-item>
      <el-form-item><el-button v-if="status == 1" type="primary" @click="saveData">确定发货</el-button></el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getexpress} from '@/api/shop/freight';
import {getDistribution, localDelivery, dadaPay, expressOrder, getOrderStoreList, getcityCode} from '@/api/shop/order';

export default {
  name: 'orderExpress',
  data() {
    return {
      isLoading: false,
      expressList: [],
      disabled: false,
      deliver_type: 1,
      status: 1,
      thirdlist: [],
      fee: 0,
      express_type: 0,
      itemRules: {
        express_company: [
          {
            required: true,
            message: '请选择物流'
          }
        ],
        logistics_no: [
          {
            required: true,
            message: '请输入单号'
          }
        ]
      },
      cityCode: ''
    };
  },
  props: {
    order: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  created() {
    this.getDistribution();
  },
  computed: {
    comm_select_length: function() {
      return this.order.orderCommoditys.filter(_ => _.status == '待发货').length;
    }
  },
  methods: {
    getcityCode() {
      let data = {oid: this.order.id};
      getcityCode(data).then(res => {
        let list = res.msg.result;
        let address = this.order.address.split(',');

        list.forEach(a => {
          if (address[1].indexOf(a.cityName) > -1) {
            this.cityCode = a.cityCode;
          }
        });
        this.changetype(1);
      });
    },
    //选择门店自动激活选中当前记录
    selItem(i) {
      this.order.orderCommoditys[i].isSelected = true;
    },
    changetype(e) {
      console.log(e);
      if (e == 1) {
        let _data = {};
        _data.oid = this.order.id;
        _data.type = this.express_type == 0 ? 1 : 2;
        if (this.express_type > 0) {
          _data.third = this.express_type;
          _data.data = {city_code: this.cityCode, is_prepay: 0, cargo_weight: 5};
        }

        this.isLoading = true;
        localDelivery(_data).then(res => {
          let data = res.msg;
          // let json = data[0];
          this.fee = data.fee;
          this.expressinfo = data;
          if (data.status) {
            this.status = 1;
          } else {
            this.msg = data.msg;
            this.status = 0;
          }
        });
      }
    },
    //获取配送方式
    getDistribution() {
      this.isLoading = true;
      getDistribution(this.order.id).then(res => {
        this.isLoading = false;
        let list = res.msg;
        let thirdlist = [];

        list.forEach(a => {
          if (a.third) {
            if (a.third.indexOf('2') > -1) {
              thirdlist.push({
                label: '达达',
                value: 1
              });
            }
            if (a.third.indexOf('1') > -1) {
              thirdlist.push({
                label: '美团',
                value: 2
              });
            }
          } else {
            thirdlist.push({
              label: '商家配送',
              value: 0
            });
          }
        });

        this.thirdlist = thirdlist.sort((a, b) => {
          return a.value - b.value;
        });
        this.express_type = this.thirdlist[0].value;
        if (this.express_type == 1) {
          this.getcityCode();
        }
        // if(list.findIndex(_=>_=='1')>-1){

        // }

        return false;
        this.expressList = res.msg;
      });
    },
    //选择分包裹发货的商品
    selectOne(i) {
      this.order.orderCommoditys[i].isSelected = !this.order.orderCommoditys[i].isSelected;
    },
    //保存数据(发货)
    saveData() {
      this.$refs.expressForm.validate(valid => {
        if (valid) {
          //封装数据
          // if (!this.deliver_type && this.order.orderCommoditys.length > 1) {
          //   this.$alert('请选择发货方式');
          //   return false;
          // }

          let _data = {};
          _data.oid = this.order.id;
          _data.type = this.express_type == 0 ? 1 : 2;
          if (this.express_type > 0) {
            _data.third = this.express_type;
          }

          this.isLoading = true;
          if (this.express_type == 0) {
            localDelivery(_data)
              .then(res => {
                if (this.express_type == 0) {
                  this.isLoading = false;
                  this.$emit('success');
                } else {
                  // this.dadaPay(res.msg[1]);
                }
              })
              .catch(e => {
                this.isLoading = false;
              });
          } else {
            this.dadaPay();
          }
        } else {
          //console.log('error')
          return false;
        }
      });
    },
    dadaPay() {
      let params = {
        id: this.expressinfo.id,
        oid: this.expressinfo.order_id
      };
      dadaPay(params).then(res => {
        this.isLoading = false;
        this.$emit('success');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px;
}

//选择商品
.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  //margin-bottom: 10px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .store {
      width: 180px;
      text-align: center;
    }

    .count {
      width: 80px;
      text-align: center;
    }

    .status {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;
    max-height: 210px;
    overflow-y: auto;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;
      padding-left: 10px;

      &:last-child {
        border-bottom: none;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .store {
        width: 180px;
        text-align: center;
      }

      .count {
        width: 80px;
        text-align: center;
      }

      .status {
        width: 80px;
        text-align: center;

        &.done {
          color: #67c23a;
        }

        &.none {
          color: #f56c6c;
        }
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}

.el-input {
  width: 270px;
}

.box {
  width: 100%;
  /*padding: 60px;
  height: calc(100vh - 77px);
  overflow: scroll;*/
}
</style>
